import React, {useCallback, useState} from 'react';
import FunUseCallBackChildren from "@/components/15- 常用Hooks/04- useCallback/FunUseCallBackChildren";
import FunUseCallBackTwo from "./components/15- 常用Hooks/04- useCallback/FunUseCallBackTwo";

function App(props) {
    const [num, setNum] = useState(0);
    const [userName, setUserName] = useState("zhangsan");
    // useCallback为函数增加缓存，只要num未改变，那么changeNum未发生更改
    // 与memo结合使用最大的好处：可以减少子组件没有意义的render.
    const changeNumTwo = useCallback(function (n) {
        setNum(num + n * 2);
    }, [num])

    const changeNum = function (n) {
        setNum(num + n * 2);
    }
    return (
        <div>
            <button onClick={() => setNum(num + 1)}>app->{num}</button>
            <button onClick={() => setUserName(userName + "!")}>app->{userName}</button>
            <hr/>
            {/*
                memo 与 useCallback结合使用，可以减少子组件没有意义的render.
                但是如果传递的函数是匿名函数，那么 memo 将不起作用,此时 useCallback 解决了这个问题
            */}
            <FunUseCallBackChildren changeNum={changeNum} num={num}/>
            <FunUseCallBackTwo changeNum={changeNumTwo} num={num}></FunUseCallBackTwo>
        </div>
    );
}

export default App;